<template>
  <transition name="scale">
    <div
      v-show="isOpen"
      class="popup-message font-size-16 font-weight-500 line-height-140"
      :class="{ failed: failedTheme, gradient: gradientTheme, 'no-nav': hidden }"
    >
      {{ message }}
    </div>
  </transition>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useNavStore } from '@/store/nav'
import { usePopupMessageStore } from '@/store/popup-message'

const { hidden } = storeToRefs(useNavStore())
const { isOpen, message, failedTheme, gradientTheme } = storeToRefs(usePopupMessageStore())
</script>

<style lang="scss" scoped>
.popup-message {
  width: fit-content;
  min-width: 10.625rem;
  padding: 0.5rem 1rem;
  border-radius: 0.625rem;
  background: rgba(24, 25, 37, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 50%;
  transform: translate(-50%, -9.125rem) scale(1);

  z-index: 3000;

  &.no-nav {
    transform: translate(-50%, -5.75rem) scale(1);
  }
}

.scale-enter-active,
.scale-leave-active {
  transition: transform 0.5s ease;
}

.scale-enter-from,
.scale-leave-to {
  transform: translate(-50%, -9.125rem) scale(0);
}

.failed {
  background: rgba(244, 44, 82, 0.5);
  z-index: 3001;
}
.gradient {
  background: linear-gradient(
    180deg,
    rgba(var(--v-theme-primary-gradient-from), 0.6) 0%,
    rgba(var(--v-theme-primary-gradient-to), 0.6) 100%
  );
  box-shadow: 0rem 0rem 0.4375rem 0rem rgba(255, 15, 0, 0.68);
  z-index: 3001;
}
</style>
